<template>
	<view class="Jy_pay_page">
		<view class="Jy_pay_container">
			<view class="subsection_box">
				<u-subsection :list="subSectionList" fontSize="17" activeColor="#f83600" bgColor="#f83600" inactiveColor="#fff" mode="button" :current="currentIndex" @change="sectionChange"></u-subsection>
			</view>
			<view class="address_mg_group pay_info_container">
				<view class="localtion_icon_box">
					<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/location.png" mode="aspectFit"></image>
				</view>
				<view class="address_mg_basic_group">
					<view class="address_mg_name_group">
						<view class="name_box">
							<text>收货人姓名</text>
						</view>
						<view class="phone_box">
							<text>13268788913</text>
						</view>
					</view>
					<view class="detail_address_box">
						<text>这是一条收货人的地址这是一条收货人的地址</text>
					</view>
				</view>
				<view class="update_address_group">
					<view class="update_address_box" @click="getOrderAddress('1')" v-if="currentIndex == 0">
						<text>修改</text>
					</view>
					<view class="update_address_box" @click="getOfficeLineStore()" v-else>
						<text>查看</text>
					</view>
				</view>
			</view>
			
			<view class="pay_info_container shopping_info_group">
				<view class="total_shop_title_box">
					<text>共{{shoppingList.length}}件商品</text>
				</view>
				<view class="shop_info_container">
					<!-- 商品信息 -->
					<view class="shop_info_box" @click="getShoppingDetail()" v-for="(item, index) in shoppingList" :key="index">
						<view class="shop_image_box">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
						</view>
						<view class="shop_info_group">
							<view class="shop_name_box">
								<text>商品名称商品名称商品名称商品名称商品名称商品名称商品名称称商品名称称商品名称</text>
							</view>
							<view class="shop_parameter_box">
								<text>商品规格</text>
							</view>
							<view class="shop_price_box">
								<text>￥</text>
								<text>11.5</text>
							</view>
						</view>
						<view class="shop_price_group">
							<view class="shop_number_box">
								<text>x</text>
								<text class="number">1</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="pay_info_container pay_option_group">
				<view class="option_box" v-if="currentIndex == 0">
					<view class="left">
						<text>快递费用</text>
					</view>
					<view class="right">
						<text>免运费</text>
					</view>
				</view>
				<view class="person_group" v-else>
					<view class="person_box">
						<view class="left">
							<text>联系人</text>
						</view>
						<view class="right">
							<input type="text" placeholder="请填写您的联系姓名" maxlength="10">
						</view>
					</view>
					<view class="person_box">
						<view class="left">
							<text>联系电话</text>
						</view>
						<view class="right">
							<input type="text" placeholder="请填写您的联系电话" maxlength="11">
						</view>
					</view>
				</view>
				<view class="bz_group">
					<view class="bz_title">
						<view class="left_box">
							<text>备注信息</text>
						</view>
						<view class="right_box">
							<text>{{bzContent.length}}/150</text>
						</view>
					</view>
					<view class="textarea_box">
						<textarea v-model="bzContent" cols="30" rows="10" maxlength="150" placeholder="请添加备注(150字以内)"></textarea>
					</view>
				</view>
			</view>
			
			<view class="pay_info_container pay_group">
				<view class="pay_title_box">
					<text>支付方式</text>
				</view>
				<view class="pay_method_group">
					<view class="pay_method_list" v-for="(item, index) in payStatmentList" :key="index">
						<view class="pay_method_container">
							<view class="left_box">
								<view class="pay_icon_box">
									<image :src="item.icon" mode="aspectFill"></image>
								</view>
								<view class="pay_text_box">
									<text>{{item.payName}}</text>
								</view>
							</view>
							<view class="right_box">
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="pay_info_container total_price_group">
				<view class="left">
					<text>商品总价:</text>
				</view>
				<view class="right">
					<text>￥</text>
					<text>{{totalPrice}}</text>
				</view>
			</view>
		</view>
		
		<view class="pay_tabbar_group">
			<view class="pay_tabbar_box">
				<view class="total_box">
					<text class="small">合计:</text>
					<text class="small2">￥</text>
					<text class="number">{{totalPrice}}</text>
				</view>
				<view class="pay_mastment_button_box">
					<text>立即结算</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subSectionList: ['快递配送', '到店自取'],
				// 默认配送方式
				currentIndex: 0,
				// 商品总价
				totalPrice: '2400',
				// 支付方式
				payStatmentList: [
					{
						icon: require('../../static/login/wechat.png'),
						payName: '微信支付',
						text: '微信快捷支付'
					}
				],
				// 商品
				shoppingList: [{}, {}],
				bzContent: ''
			};
		},
		methods: {
			// 跳转到收货地址
			getOrderAddress(index) {
				uni.redirectTo({
					url: '/pagesA/main/customerMyCenter/shippingAddress/shippingAddress?key=' + index
				})
			},
			// 跳转到商品详情
			getShoppingDetail() {
				uni.redirectTo({
					url: '/pages/shoppingDetail/shoppingDetail'
				})
			},
			getOfficeLineStore() {
				uni.navigateTo({
					url: '/pages/offlineStores/offlineStores'
				})
			},
			sectionChange(index) {
				this.currentIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'paymentMethod.scss';
</style>
